<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="search-container">
        <el-date-picker
          v-model="dates"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
        <el-input
          v-model="listQuery.deviceName"
          placeholder="设备名称"
          style="max-width: 200px"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <el-input
          v-model="listQuery.userName"
          placeholder="用户名称"
          style="max-width: 200px"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <el-select
          v-model="listQuery.checkType"
          style="max-width: 110px"
          clearable
          placeholder="签到签退"
        >
          <el-option
            v-for="item in checkTypes"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          />
        </el-select>
        <el-select
          v-model="listQuery.matchRes"
          style="max-width: 110px"
          clearable
          placeholder="打卡结果"
        >
          <el-option
            v-for="item in matchRes"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          />
        </el-select>
        <el-button class="filter-item" type="primary" @click="handleFilter">
          {{ $t("table.search") }}
        </el-button>
      </div>
      <el-button class="filter-item" :loading="downloadLoading" type="primary" @click="handleDownload">
        导出
      </el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" label="序号" width="80">
        <template slot-scope="scope">
          <span>{{
            scope.$index + 1 + 1 * (listQuery.current - 1) * listQuery.size
          }}</span>
        </template>
      </el-table-column>
      <el-table-column width="180px" align="center" label="设备名称">
        <template slot-scope="scope">
          <span>{{ scope.row.deviceName }}</span>
        </template>
      </el-table-column>
      <el-table-column width="180px" align="center" label="设备通道">
        <template slot-scope="scope">
          <span>{{ getChanelLabel(scope.row.channel) }}</span>
        </template>
      </el-table-column>
      <el-table-column width="120px" align="center" label="用户名称">
        <template slot-scope="scope">
          <span>{{ scope.row.userName }}</span>
        </template>
      </el-table-column>
      <el-table-column width="120px" align="center" label="签到情况">
        <template slot-scope="scope">
          <el-tag :type="scope.row.checkType | statusFilter">
            {{ scope.row.checkType === 1 ? "签到" : "签退" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column width="120px" align="center" label="打卡结果">
        <template slot-scope="scope">
          {{ matchObj[scope.row.matchRes] }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="报告时间">
        <template slot-scope="scope">
          <span>{{ new Date(scope.row.reportTime) | parseTime() }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { queryReportTable, exportDown } from '@/api/attendance'
import Pagination from '@/components/Pagination'
import { parseTime } from '@/utils'
import channels from './components/mixins/channels'
export default {
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        2: 'danger'
      }
      return statusMap[status]
    }
  },
  mixins: [channels],
  data() {
    return {
      list: null,
      total: 0,
      listLoading: false,
      listQuery: {
        current: 1,
        size: 10,
        deviceName: '',
        userName: '',
        checkType: undefined,
        matchRes: undefined
      },
      dates: ['', ''],
      checkTypes: [
        {
          key: 1,
          label: '签到'
        },
        {
          key: 2,
          label: '签退'
        }
      ],
      matchRes: [
        {
          key: 1,
          label: '认证成功'
        },
        {
          key: 2,
          label: '认证失败'
        },
        {
          key: 3,
          label: '不在排班内'
        },
        {
          key: 30,
          label: '重复打卡'
        },
        {
          key: 31,
          label: '异常通道打卡'
        }
      ],
      downloadLoading: false,
      matchObj: {
        1: '认证成功',
        2: '认证失败',
        3: '不在排班内',
        30: '重复打卡',
        31: '异常通道打卡'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      const data = {
        ...this.listQuery
      }
      if (this.dates && this.dates[0]) {
        data.beginTime = `${parseTime(new Date(this.dates[0]), '{y}-{m}-{d}')} 00:00:00`
      }
      if (this.dates && this.dates[1]) {
        data.endTime = `${parseTime(new Date(this.dates[1]), '{y}-{m}-{d}')} 23:59:59`
      }
      queryReportTable(data).then((response) => {
        const { records, total } = response.object
        this.list = records || []
        this.total = total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.current = 1
      this.getList()
    },
    handleDownload() {
      this.downloadLoading = true
      const data = {
        deviceName: this.listQuery.deviceName,
        userName: this.listQuery.userName,
        checkType: this.listQuery.checkType,
        matchRes: this.listQuery.matchRes
      }
      if (this.dates && this.dates[0]) {
        data.beginTime = `${parseTime(new Date(this.dates[0]), '{y}-{m}-{d}')} 00:00:00`
      }
      if (this.dates && this.dates[1]) {
        data.endTime = `${parseTime(new Date(this.dates[1]), '{y}-{m}-{d}')} 23:59:59`
      }
      exportDown(data).then(response => {
        const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' })
        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = `考勤列表${parseTime(new Date(), '{y}{m}{d}{h}{i}{s}')}.xlsx`
        link.click()
        URL.revokeObjectURL(link.href)
        this.downloadLoading = false
      }).catch(() => {
        this.downloadLoading = false
      })
    },
    getChanelLabel(key) {
      const channel = this.channels.filter(r => r.key === key)[0]
      return channel ? channel.label : '---'
    }
  }
}
</script>
